<template>
  <div id="app">
    <!-- 头部导航 -->
    <header class="header">
      <el-row>
        <el-col :span="24">
          <el-menu default-active="5" class="el-menu-demo" mode="horizontal" @select="">
            <h3>后台管理系统</h3>
            <div class="topbar-account topbar-btn">
              <el-dropdown trigger="click">
								<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i>退出登录<i
                  class="iconfont icon-down"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <router-link :to="'/person'" style="text-decoration:none;"><span style="color: #555;font-size: 14px;">个人设置</span></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link :to="'/Modify'" style="text-decoration:none;"><span style="color: #555;font-size: 14px;">修改密码</span></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-menu>
        </el-col>
      </el-row>
    </header>
    <!--<div style="position: relative;height: 60px;width: 100%;"></div>-->
    <main>
      <div class="main-left">
        <!-- 左侧导航 -->

        <el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
            <el-menu-item-group>
              <el-menu-item index="/dapp">DAPP运营指标</el-menu-item>
              <el-menu-item index="/sweets">糖果分布指标</el-menu-item>
              <el-menu-item index="/userQuery">单用户查询</el-menu-item>
              <el-menu-item index="/uploadData">上传数据管理</el-menu-item>
              <!--<el-menu-item index="/admin">系统管理</el-menu-item>-->
            </el-menu-item-group>
        </el-menu>

      </div>

      <!-- 右侧主内容区 -->
      <!--<div  class="main-right" >-->
      <section class="content-container">
        <div class="grid-content bg-purple-light">
          <el-col :span="2" class="breadcrumb-container">
            <strong class="title">{{$route.name}}</strong>
          </el-col>
          <el-col :span="24" class="content-wrapper">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </el-col>
        </div>
      </section>
      <!--</div>-->
    </main>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Element from 'element-ui'
  Vue.use(Element);
  export default {
    name: 'app',
    data: function() {
      return {
        active: true,
        isCollapse: true
      }
    },
    methods: {
      logout() {
        var _this = this;
        this.$confirm('确认退出吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          sessionStorage.removeItem('access-user');
          _this.$router.push('/login');
        }).catch(() => {

        });
      }
    }
  }
</script>

<style>
  .el-form-item__label {
    font-size: 12px;
    line-height: 4;
    width: 100px;
    text-align: center;
    margin-top: -16px;
  }
  body {
    margin: 0;
  }

  #app {
    min-width: 100%;
    margin: 0 auto;
    font-family: "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 12px;
  }
  /* 头部导航 */

  header {
    z-index: 1000;
    min-width: 100%;
    transition: all 0.5s ease;
    /*border-top: solid 4px #3091F2;*/
    background-color: #20a0ff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
  }

  header.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  header .el-menu-demo {
    background-color: #20a0ff!important;
    height: 64px;
  }
  /* 主内容区 */

  main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 800px;
    background-color: #FCFCFC;
  }

  main .main-left {
    text-align: center;
    float: left;
    background-color: #f1f2f7;
    width: 160px;
    overflow: hidden;
  }

  main .main-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff;
  }

  main .el-menu {
    background-color: transparent;
    color: #fff;
    width: 100%;
  }

  h3 {
    color: #fff;
    margin-left: 40px;
    float: left;
    margin-top: 27px;
  }

  .el-submenu__title {
    position: relative;
    padding-right: 55px;
  }

  .topbar-btn {
    color: #fff;
  }

  .topbar-account {
    float: right;
    padding-right: 12px;
    margin-top: 30px;
  }

  .userinfo-inner {
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    padding-right: 30px;
  }

  .content-container {
    background: #fff;
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    padding-bottom: 1px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100%;
    min-height: 400px;
  }

  .el-input,
  .el-cascader-menu__item,
  .el-menu-item,
  .el-submenu__title,
  .el-select-dropdown__item,
  .el-table,
  .el-button,
  .el-textarea__inner {
    font-size: 12px
  }

  .el-form-item__label {
    font-size: 12px;
    line-height: 4;
  }



  /*.el-dialog {*/
    /*margin: 10px;*/
  /*}*/

  .el-submenu .el-menu-item {
    min-width: 160px;
    padding: 0px;
  }

  .el-menu-item-group__title {
    padding: 0px;
  }

  .el-select-dropdown__item.selected {
    color: white;
  }
</style>
